<template>
	<div class="index-page">
		<el-header class="p-header">
			<div class="p-title">
				七巧板企业信息维护系统
			</div>
			<el-dropdown @command="handleExit" trigger="click">
				<div class="p-user">
					<i class="el-icon-user"></i>
					{{username}}
					<i class="el-icon-caret-bottom"></i>
				</div>
				<el-dropdown-menu slot="dropdown">
					<!-- <el-dropdown-item command="user" >个人信息</el-dropdown-item> -->
					<el-dropdown-item command="exit" >退出登录</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</el-header>
		<el-container class="p-container">
			<el-aside class="p-aside">
				<el-menu router >
					<el-submenu index="a">
						<template slot="title">
							<i class="el-icon-edit-outline"></i>
							<span>企业信息维护</span>
						</template>
						<el-menu-item index="/menu">
						<i class="el-icon-user"></i>
						企业信息管理</el-menu-item>
						<el-menu-item index="/user">
							<i class="el-icon-date"></i>
							高管信息管理
						</el-menu-item>
					</el-submenu>

				</el-menu>
			</el-aside>
			<el-main class="p-main">
				<router-view></router-view>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				username:''
			}
		},
		created(){
			this.username = this.$route.query.username
		},
		methods:{
			handleExit(command){
				if(command == 'exit'){
					this.$confirm('正在退出登录是否继续？','提示',{
						type:'warning'
					}).then(() => {
						console.log('确认')
						//清空本地会话
						sessionStorage.clear()
						//跳转回登录页面
						this.$router.push('/login')
					}).catch(() => {
						console.log('取消')
					})
				}
			}
		}
	}
</script>

<style scoped >
	.index-page{
		height: 100%;
		background-color: #eee;
		margin: 0px;
		padding: 0;
	}
	.p-header{
		background-color: rgb(81, 133, 202);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.p-header .p-title{
		font-size: 22px;
		cursor:pointer;
		color: #fff;
	}
	.p-header .p-title:hover{
		color: #837979;
	}
	.p-header .p-user{
		cursor: pointer;
	}
	.p-container{
		height: calc( 100% - 60px );
		height: 100%;
	}
	.p-aside{
		background-color: aliceblue;
		width: 230px !important;
	}
	.p-main{
		background-color: #fff;
	}
	.p-user{
		color: #fff;
	}
</style>